<mat-toolbar class="title" color="primary">
  <div>Settings</div>
  <button mat-icon-button (click)="onNoClick()">
    <mat-icon>close</mat-icon>
  </button>
</mat-toolbar>

<div mat-dialog-content>
  <div class="example-container">
    <div>
      <mat-form-field appearance="fill">
        <mat-label>Chart Title</mat-label>
        <input matInput [(ngModel)]="chartTitle" >
      </mat-form-field> 

      <mat-form-field appearance="fill"> 
        <mat-label >Chart Type</mat-label>
        <mat-select [(ngModel)]="chartType" (selectionChange)="onChartType()">
          <mat-option *ngFor="let type of chartTypeList" [value]="type">
            {{ type | titlecase }}
          </mat-option>
        </mat-select>
      </mat-form-field>
      
      <mat-form-field appearance="fill"> 
        <mat-label >Format</mat-label>
        <mat-select [(ngModel)]="format" (selectionChange)="onFormat()">
          <mat-option value="row">Default</mat-option>
          <mat-option value="number">Numbers</mat-option>
          <mat-option value="short">Short</mat-option>
          <mat-option value="bytes">Bytes</mat-option>
        </mat-select>
      </mat-form-field>
    </div>
    
    <div>
      <button mat-raised-button color="primary" (click)="addRecord()">
        <mat-icon>add</mat-icon>
        Add Prometheus item</button>
      <hr>
    </div>

    <div>
      <h5>Query</h5>
      <table mat-table [dataSource]="dataSource" style="width: 100%; margin-bottom: 1rem;" #table> 

        <ng-container matColumnDef="id">
          <th mat-header-cell *matHeaderCellDef> No. </th>
          <td mat-cell *matCellDef="let element"> {{element.id}} </td>
        </ng-container>

        <ng-container matColumnDef="panelDataSource"> 
          <th mat-header-cell *matHeaderCellDef> Panel Data Source </th>
          <td mat-cell *matCellDef="let element"> {{element.panelDataSource}} </td>
        </ng-container>

        <ng-container matColumnDef="buttons">
          <th mat-header-cell *matHeaderCellDef> 
            <mat-icon>edit</mat-icon>
          </th>
          <td mat-cell *matCellDef="let element" style="text-align: right;">
            <button mat-icon-button color="primary" aria-label="Delete"
              (click)="deleteRecord(element.id)">
              <mat-icon>delete</mat-icon>
            </button>
            <button mat-icon-button color="primary" aria-label="Edit"
              (click)="editRecord(element)">
              <mat-icon>edit</mat-icon>
            </button>
          </td>
        </ng-container>
        
        <!-- <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr> -->
        <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
      </table>
 
      <mat-tab-group mat-stretch-tabs
          style="margin-bottom: 1rem;"
          class="mat-elevation-z4"
          *ngIf="detailShow">
        <mat-tab label="Fields"> 
          <div style="padding: 1rem">
            <mat-form-field appearance="fill" style="width: 100%;">
              <mat-label >Counter</mat-label>
              <mat-chip-list #chipList class="chips-container prometheus" (click)="selectPrometheus.open()">
                <mat-chip class="custom-mat-chip"
                  *ngFor="let item of prometheus.value"
                  [selectable]="false"
                  (click)="selectPrometheus.open()"
                  [removable]="true"
                  (removed)="remove(item, 'prometheus')">
                  {{item}}
                  <mat-icon matChipRemove >cancel</mat-icon>
                </mat-chip>
              </mat-chip-list>
              <mat-select multiple
              class="chips-container-selector prometheus"
              #selectPrometheus
              [formControl]="prometheus" (selectionChange)="onPrometheusLabel()">
                <mat-option *ngFor="let item of prometheusLabelList" [value]="item">
                  {{ item }}
                </mat-option>
              </mat-select>
            </mat-form-field>
            <app-code-style-prometheus-field
              [queryText]="prometheusQuery"
              (updateData)="onPrometheusQuery($event)"
              [arrayForMenu]="metricList"
            ></app-code-style-prometheus-field>
            <div class="item-metric" *ngFor="let item of _metricList">
              {{ item }}
            </div>
            <div>
              <mat-checkbox [(ngModel)]="isSum" (change)="onSum()">Sum</mat-checkbox>
            </div> 
          </div>

        </mat-tab>
      </mat-tab-group>
    </div>
  </div>
</div>

<div mat-dialog-actions style="float: right; margin-bottom: 0rem;">
  <button mat-raised-button (click)="onNoClick()">Cancel</button>
  <button mat-raised-button color="primary" [mat-dialog-close]="outputObject" cdkFocusInitial>Save</button>
</div>
